<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { ShopMode } from '@/constant/global'
import { doGetShopInfo } from '@/apis/good'

interface MarketingData {
  productName: string
  productId: Long
  shopId: Long
  teamNo: string
  TYPE: string
}

defineProps({
  info: {
    type: String,
    default: '',
  },
})
const showP = ref(false)
const marketingData = ref({
  productName: '',
  productId: '',
  shopId: '',
  teamNo: '',
  TYPE: '',
})
const queryPath = computed(() => {
  const { TYPE, teamNo } = marketingData.value
  const extra = {
    type: TYPE,
    teamNo,
  }
  return `extra=${encodeURIComponent(JSON.stringify(extra))}`
})
const pathObj = {
  Group: `/pluginPackage/goods/commodityInfo/InfoEntrance`,
}
const productNameView = computed(() => {
  const len = marketingData.value.productName.length
  if (len && len > 8) {
    return marketingData.value.productName.substring(0, 8) + '...'
  }
  return marketingData.value.productName
})

onShow(() => {
  uni.getClipboardData({
    success: function (res) {
      const str = res.data
      console.log(str)
      if (str.includes('复制:/ 浏览商品 #') && str.includes('TYPE')) {
        // 使用正则表达式提取目标数据
        const matches = str.match(/\【(.+?)\】(.+)/)
        if (matches) {
          const dataArr = matches[2].split(' ')
          const result: MarketingData = {
            TYPE: '',
            shopId: '',
            teamNo: '',
            productName: '',
            productId: '',
          }
          result.productName = matches[1]
          // 将提取出来的数据处理成对象
          dataArr.forEach((item) => {
            const [key, value] = item.split('_')
            result[key] = value
          })
          marketingData.value = result
          showP.value = true
        }
      }
    },
  })
})

const show = () => {
  showP.value = true
}
const close = () => {
  showP.value = false
}
const handleClick = async () => {
  showP.value = false
  try {
    const { productId, shopId } = marketingData.value
    if (marketingData.value.TYPE === 'Group') {
      const { data, code, msg } = await doGetShopInfo({ shopId, type: 'PRODUCT_DETAIL' })
      if (code !== 200) return uni.showToast({ title: `${msg ? msg : '获取商铺信息失败'}`, icon: 'none' })
      if (data) {
        const { shopMode } = data
        if (shopMode === ShopMode.COMMON) {
          uni.navigateTo({
            url: `/pluginPackage/goods/commodityInfo/InfoEntrance?shopId=${shopId}&goodId=${productId}`,
            success: () => {
              resetClipboardData()
            },
          })
        } else if (shopMode === ShopMode.O2O) {
          uni.navigateTo({
            url: `/pluginPackage/o2o-goods/o2o-goods?shopId=${shopId}&goodId=${productId}`,
            success: () => {
              resetClipboardData()
            },
          })
        } else {
          uni.showToast({
            title: '获取店铺信息失败',
            icon: 'none',
          })
        }
      }
    } else {
      const url = pathObj[marketingData.value.TYPE] + `?shopId=${shopId}&goodId=${productId}&` + queryPath.value
      uni.navigateTo({
        url,
        success: () => {
          resetClipboardData()
        },
      })
    }
  } catch (error) {
    return
  }
}
const resetClipboardData = () => {
  uni.setClipboardData({ data: '', showToast: false })
}
defineExpose({ show, close })
</script>

<template>
  <u-popup
    v-model="showP"
    :border-radius="20"
    close-icon-color="#000"
    close-icon-size="20"
    closeable
    length="80%"
    mode="center"
    @close="resetClipboardData"
  >
    <view class="marketing_title">
      · 精选好物
      <text class="fontBold">【{{ productNameView }}】</text>
      ·
    </view>
    <view class="marketing_btn">
      <u-button :custom-style="{}" ripple type="error" @click="handleClick">前往查看</u-button>
    </view>
  </u-popup>
</template>

<style lang="scss" scoped>
@include b(marketing_title) {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

@include b(marketing_btn) {
  margin: 10px 20px;
  margin-top: 0px;
}
</style>
